<template>
  <div class="app-container">
    <el-card v-loading="listLoading" class="box-card">
      <div slot="header" class="clearfix">
        <span>图片管理器</span>
      </div>
      <!-- 搜索筛选操作栏 -->
      <div class="filter-container clearfix">
        <el-input
          v-model="listQuery.name"
          placeholder="请输入图片名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          icon="iconfont qt-caozuo-xunhuan1"
          @click="clearFilter"
        >
          清除条件
        </el-button>
        <el-upload
          :file-list="fileList"
          action="#"
          :limit="1"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG"
          :http-request="
            (file) => {
              return uploadImgHandle(file);
            }
          "
          style="float: right; margin-right: 10px"
          :class="{ hide: fileList.length > 0 }"
        >
          <el-button size="small" type="primary">上传图片</el-button>
        </el-upload>
      </div>
      <el-row :gutter="20">
        <el-col v-for="(item, index) in list" :key="index" :span="4">
          <el-image
            style="width: 100%; height: 200px; margin-bottom: 20px"
            :src="$store.state.settings.imgHost + item.image_url"
            :preview-src-list="[$store.state.settings.imgHost + item.image_url]"
          />
        </el-col>
      </el-row>

      <!-- 分页 -->
      <div v-if="total > 0" style="text-align: right">
        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.per_page"
          @pagination="getList"
        />
      </div>

      <!-- <div style="text-align: center;margin-top: 30px;margin-bottom: 30px;">
        <el-button waves type="primary" :loading="submitLoading" @click="updateData()">
          保存
        </el-button>
      </div> -->
    </el-card>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getPhoto, updateArticle, uploadFile } from '@/api/common'

const defaultForm = {
  post_title: undefined,
  group_id: undefined,
  post_source: undefined,
  post_source_url: undefined,
  post_hits: undefined,
  post_like: undefined,
  post_favorites: undefined,
  post_excerpt: undefined,
  post_keywords: undefined,
  post_content: undefined,
  more: []
}

export default {
  name: 'SettingPhoto',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      submitLoading: false,
      form: Object.assign({}, defaultForm),
      loading: false,
      list: undefined,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        per_page: 20,
        name: undefined
      },
      fileList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    clearFilter() {
      this.listQuery['name'] = undefined
      this.handleFilter()
    },
    uploadImgHandle(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      uploadFile(formData).then(() => {
        this.$notify({
          title: '成功',
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    getList() {
      this.listLoading = true
      getPhoto(this.listQuery)
        .then((response) => {
          const { data, total } = response.data
          this.list = data
          this.total = total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    updateData() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          this.submitLoading = true
          updateArticle(this.form)
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    }
  }
}
</script>

<style>
.el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
  display: none !important;
}

.hide .el-upload--picture-card {
  display: none;
}
</style>
